<template>
  <el-autocomplete
    ref="autocompleteInput"
    v-model="aac001"
    style="width: 400px"
    :debounce="1000"
    :value-key="'aac001'"
    placeholder="个人编号、姓名或证件号码"
    :disabled="selfDis"
    :clearable="true"
    :fetch-suggestions="personBaseInfoSearch"
    :loading="loading"
    auto-focus="false"
    custom-item="true"
    :popper-append-to-body="true"
    @keyup.esc.native="fnHiddenSelectOptions"
    @keyup.enter.native="handleEnter"
    @select="personBaseInfoSelect"
    @change="fnHiddenSelectOptions"
    @blur="personBaseInfoBlur"
    @focus="isFocus = true"
  >
    <!-- 修改后的模板 -->
    <template #default="{ item }">
      <div class="rpc-container" :class="{'has-unit': isShowUnit}">
        <div class="rpc-row">
          <!-- 姓名列 -->
          <div class="rpc-col name-col">
            <el-tooltip :content="item.aac003" placement="top">
              <span ref="nameText" class="rpc-text">{{ item.aac003 }}</span>
            </el-tooltip>
          </div>

          <!-- 证件号码列 -->
          <div class="rpc-col id-col">
            <el-tooltip :content="item.aac002" placement="top">
              <span ref="idText" class="rpc-text">{{ item.aac002 }}</span>
            </el-tooltip>
          </div>

          <!-- 个人编号列 -->
          <div class="rpc-col num-col">
            <el-tooltip :content="item.aac001" placement="top">
              <span ref="numText" class="rpc-text">{{ item.aac001 }}</span>
            </el-tooltip>
          </div>

          <!-- 单位列（条件渲染） -->
          <!--          <div v-if="isShowUnit" class="rpc-col unit-col">-->
          <!--            <el-tooltip :content="item.aab004" placement="top" :disabled="!isEllipsisActive">-->
          <!--              <span class="rpc-text" ref="unitText">{{ item.aab004 }}</span>-->
          <!--            </el-tooltip>-->
          <!--          </div>-->
        </div>
      </div>
    </template>
  </el-autocomplete>
</template>

<script>
import personApi from './rpc'
export default {
  name: 'PersonRpc',
  data() {
    return {
      aac001: '',
      selfDis: false,
      isFocus: false,
      isShowUnit: true,
      loading: false,
      isEllipsisActive: false,
      personData: []
    }
  },
  methods: {
    handleEnter(event) {
      // .native.prevent 已经阻止了默认行为
      // 关键：阻止默认表单提交行为
      event.preventDefault() // 阻止默认表单提交
      event.stopPropagation() // 阻止事件冒泡

      // 执行你的RPC搜索逻辑
      // 执行搜索逻辑
      this.executePersonSearch()
    },
    executePersonSearch() {
      const query = this.aac001

      // 如果查询为空则返回
      if (!query || query.trim() === '') {
        this.$message.warning('请输入查询内容')
        return
      }

      // 创建回调函数处理搜索结果
      const handleSearchResults = (results) => {
        // 获取 autocomplete 实例
        const autocomplete = this.$refs.autocompleteInput

        // 确保组件存在
        if (autocomplete) {
          // 设置建议列表
          autocomplete.suggestions = results

          // 显示下拉列表
          autocomplete.activated = true
          autocomplete.suggestionsVisible = true

          // 如果有结果，选中第一项
          if (results.length > 0) {
            // 设置高亮项为第一个
            autocomplete.highlightedIndex = 0

            // 可选：自动选择第一项
            // this.personBaseInfoSelect(results[0]);
          } else {
            this.$message.warning('未找到匹配结果')
          }
        }
      }
      // 调用搜索方法
      this.personBaseInfoSearch(query, handleSearchResults)
    },
    personBaseInfoSearch(query, cb) {
      // 模拟搜索数据
      setTimeout(() => {
        this.loading = true
        this.getSearchResults(query, cb) // 用你自己的逻辑获取数据
        // cb(results)
        this.loading = false
      }, 500)
    },
    restAac001(item) {
      this.aac001 = item
    },
    getSearchResults(query, cb) {
      // 这里可以模拟返回一个搜索结果数组
      // 后台查询数据
      if (query === null || query === '' || query === undefined) {
        return []
      }
      personApi.getPersonInfo({ aac001: query, aac002: query, aac003: query }).then(res => {
        this.personData = res
        this.$nextTick(() => {
          cb(res)
        })
      })
    },
    personBaseInfoSelect(item) {
      // 选择某项后的回调处理
      console.log('选中项:', item)
      this.$emit('personRpcCallBack', item)
    },
    fnHiddenSelectOptions() {
      // 处理隐藏选项的逻辑
      this.loading = true
    },
    personBaseInfoBlur() {
      // 失去焦点的处理逻辑
      this.loading = true
    }
  }
}
</script>

<style scoped>
.rpc-row {
  display: flex;
  justify-content: space-between;
}
.rpc-text {
  display: inline-block;
  padding: 0 10px;
}
.is-event-num {
  background-color: #f5f5f5;
}

/* 新增样式 */
.rpc-container {
  width: 100%;
}

.rpc-row {
  display: flex;
  align-items: center;
  height: 30px;
}

.rpc-col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 1px;
  box-sizing: border-box;
}

/* 默认列宽分配 */
.name-col { flex: 3; }
.id-col   { flex: 7; }
.num-col  { flex: 5; }
/*.unit-col { flex: 3; }*/

/* 当显示单位列时的特殊处理 */
/*.rpc-container.has-unit .name-col { flex: 2; }*/
/*.rpc-container.has-unit .id-col   { flex: 4; }*/
/*.rpc-container.has-unit .num-col  { flex: 2; }*/

.rpc-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
